<template>
    <div class="form_modal">
        <el-dialog
            :visible.sync="modal1"
            center
            :before-close="handleClose">
            <div class="modal_title"> <span> {{title_name}} </span></div>
            <el-form :model="formData" :rules="rules" ref="formData" label-width="120px">
              <el-form-item v-if="title_name == '销售设备'" label="设备名称" prop="deviceName">
                <el-input v-model="formData.deviceName" :readonly="true" placeholder="请输入设备名称" style="width: 300px;"></el-input>
              </el-form-item>
               <el-form-item v-if="title_name == '销售设备'" label="设备状态" prop="deviceStatus">
                <el-select v-model="formData.deviceStatus" :readonly="true" placeholder="请选择设备状态" >
                    <el-option :value="0" label="库存"> 库存 </el-option>
                    <el-option :value="1" disabled label="销售"> 销售 </el-option>
                    <el-option :value="2" disabled label="安装"> 安装 </el-option>
                    <el-option :value="3" disabled label="返库"> 返库 </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="title_name == '销售设备'" label="设备编码" prop="imei">
                <el-input v-model="formData.imei" :readonly="true" placeholder="请输入设备编码" style="width: 300px;"></el-input>
              </el-form-item>
              <el-form-item label="项目" prop="projectId">
                <el-select v-model="formData.projectId" placeholder="请选择项目" >
                  <el-option v-for="(item, index) in projects" :key="index" :value="item.projectId" :label="item.projectName"> {{item.projectName}} </el-option>
                </el-select>
              </el-form-item>
            </el-form>

            <!-- 保存--取消按钮 -->
            <el-row :gutter="24" type="flex" justify="end">
                <el-col :span="4">
                    <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button @click="handleClose('formData')">取 消</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import { searchCity} from '@/api/home.js'
import { loadProjectList } from '@/api/myProject'

export default {
    props:['detail', 'title', 'multiData'],
    data(){
        return {
          projects: [],
            title_name: '',
            modal1: false,
            formData: {
                deviceName: '',
                deviceStatus: 0,
                imei: '232312344567761',
                deviceStatus: null
                
            },
            rules: {
                // deviceName: [
                //     { required: true, message: '设备名称!', trigger: 'blur' },
                //     { type: 'string', max: 50, message: '不能超过50个字符', trigger: 'blur' },
                // ],
                projectId: [
                    { required: true,  message: '项目不能为空！', trigger: 'blur' },
                ],
                // imei: [{ required: true, message: '设备编码不能为空！', trigger: 'blur' }],
                // versionRemark: [{ required: true, message: '版本描述不能为空！', trigger: 'blur' }],
                // deviceRemark: [{ required: true, message: '设备备注不能为空！', trigger: 'blur' }],
                // remark: [{ required: true, message: '设备中文描述不能为空！', trigger: 'blur' }],
            },
        }
    },
    methods:{
        
        //提交
        submitForm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                  let _projectName 
                  this.projects.map(v => {
                    if(v.projectId === this.formData.projectId){
                        _projectName = v.projectName

                    }
                  })
                  if(this.title_name == '销售设备'){
                    this.$emit('submit', { deviceStatus: 1, projectName: _projectName,  projectId: this.formData.projectId, imeis: [{ imei: this.formData.imei}]} )

                  }else {
                    let imeis = []
                    this.multiData.map(v => {
                      imeis.push({ imei: v })
                    })
                    this.$emit('submit', { deviceStatus: 1, projectName: _projectName, projectId:this.formData.projectId, imeis: imeis} )
                  }
                  this.modal1 = false
                } else {
                  return false;
                }
            });
        },
        // 取消
        handleClose(form){
            this.modal1 = false;
            // this.$refs[form].resetFields(); //重置清空
        },
       
    },
    watch:{
        detail: function (val) {
          if(val){
            this.formData = {
              imei: val.imei,
              projectId: null,
              deviceName: val.deviceName,
              deviceStatus: val.deviceStatus
            }

          }
        },
        title: function (title) {
            this.title_name = title;
        },
        modal1: function(val){
          if(val){
            loadProjectList({
              userId: this.$store.state.user.id,
              status: this.$store.state.user.userInfo.status,
              accountType: this.$store.state.user.userInfo.accountType
            }).then(res => {
              this.projects = res.data
            }).catch()

            if(this.detail){

            }else{
              this.formData = {
                projectId: null
              }
            }
          }
        }
    }
}
</script>

<style scoped>
  /* @import url('../../assets/css/dialog.css'); */
</style>

